<template>
    <div class="order-list-container" >
        
        <div class="date-txt">
            <div class="order-month" @click="open_calendar=true">
                {{year}}年{{month}}月
                <img src="../assets/select.png" />
            </div>
        </div>
        <div class="new-container"
        v-infinite-scroll="load_more"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="20">
        <div class="calendar-chose-selector" v-show="open_calendar">
            <div class="chose-selector-con">
                <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    @confirm="chosed"
                    @change = "changeVal"
                    @cancel="open_calendar=false"
                />
            </div>
        </div>
        <div v-if="has_data">
          <ul >
              <li v-for="item in list" @click="goto_detial(item.transTime,item.amount,item.tradeNo,item.paymentState,item.payTime,item.bankname)">
                  <div class="li-item">
                      <div class="lit-item1">
                          <div class="lit-txt1">{{item.bankname}}</div>
                          <div class="lit-txt2">{{item.transTime}}</div>
                      </div>
                      <div class="lit-item2">
                          {{item.amount}}
                      </div>
                      <div class="clearfix"></div>
                  </div>
              </li>
          </ul>
        </div>
        <div v-if="!has_data" class="no-data">
            暂无交易
        </div>
      </div>  
    </div>
</template>
<script>
export default {
  data() {
    return {
      currentDate: new Date(), //当前月
      year: "", //当前选中年份
      month: "", //当前选中月份
      open_calendar: false, //打开日历
      temp_data_arr: [], //临时日历数组
      has_data: true, //是否有数据
      list:[],
      status: "",
      PageSize:8,
      PageIndex:1,
      start_time:'',
      end_time:'',
      hasOver:true,
    };
  },
  created() {
    let that = this;
    that._load()
  },
  methods: {
    //获取当前月份
    get_chosed_date(year,month){
      let that = this
      return {
        start_time:year+'-'+month+'-01',
        end_time:year+'-'+month+'-'+that.days(year,month)
      }
    },
    //获取当前天数
    days(year,month){
      let now = new Date(parseInt(year),parseInt(month), 0)
      return now.getDate()
		},
    getCurrentMonthLast(){
      var date=new Date();
      var currentMonth=date.getMonth();
      var nextMonth=++currentMonth;
      var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
      var oneDay=1000*60*60*24;
      return new Date(nextMonthFirstDay-oneDay);
    },
    handleTopChange(status) {
      this.topStatus = status;
      console.log('handleTopChange')
    },
    loadBottom(){
      console.log("loadBottom")
      let that = this
      //that.init_data()
      that.$api.ajax([that.init_data()])
      //that.$api.ajax([that.init_data(function(){that.$refs.loadmore.onBottomLoaded()})])
    },
    handleBottomChange(){
      console.log('handleBottomChange')
    },
    chosed() {
      let that = this
      let myDate = new Date()
      that.year = that.temp_data_arr[0]?that.temp_data_arr[0]:myDate.getFullYear()
      if(that.temp_data_arr[1]){
        that.month = that.temp_data_arr[1]
      }else{
        that.month = myDate.getMonth() + 1 < 10
          ? "0" + (myDate.getMonth() + 1)
          : myDate.getMonth() + 1
      }
      that.list = []
      that.open_calendar = false
      //重置页码为1
      that.PageIndex = 1
      //that.get_chosed_date(that.year,that.month)
      that.$api.ajax([that.init_data()])
    },
    changeVal(picker) {
      let that = this;
      that.temp_data_arr = picker.getValues();
    },
    _load() {
      let that = this
      that.init_cal()
      //that.$api.ajax([that.init_data()])
    },
    init_cal(){
      let that = this
      let myDate = new Date()
      that.year = myDate.getFullYear()
      that.month =
        myDate.getMonth() + 1 < 10
          ? "0" + (myDate.getMonth() + 1)
          : myDate.getMonth() + 1
    },
    load_more(){
      let that = this
      if(that.hasOver&&that.has_data){
        that.$api.ajax([that.init_data()])
      }
    },
    //获取初始数据
    init_data(){
      let that = this
      let moth_obj = that.get_chosed_date(that.year,that.month)
      let params = {
        openid:that.$storage.get('openid'),	// string	是	微信识别码
        PageSize:that.PageSize,	// int	是	每页记录数
        PageIndex:that.PageIndex,	// int	是	页数
        stime:moth_obj.start_time,
        etime:moth_obj.end_time
      }
      return new Promise(function(resolve,reject){
          that.$api.GetQuickPayList(params).then(res => {
            if(res.RCD==0){
              if(res.DATA.length){
                that.has_data = true
                for(let i=0;i<res.DATA.length;i++){
                  that.list.push(res.DATA[i])
                }
              }
              if(res.DATA.length){
                that.hasOver = true
                that.PageIndex++
              }else{
                that.hasOver = false
                if(that.PageIndex==1){
                  that.has_data = false
                }
              }
            }else{
              that.$totast(res.ErrMsg)
            }
            resolve()  
          }).catch(err=>{
            resolve() 
          })
      })
    },
    goto_detial(transTime,amount,tradeNo,paymentState,payTime,bankname) {
      let that = this;
      that.$router.push({
        path: "OrderDetial",
        query:{
            transTime,
            amount,
            tradeNo,
            paymentState,
            payTime,
            bankname
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.order-list-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .new-container{
    width: 100%;
    height: 90vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  .date-txt {
    padding: 4% 0;
    .order-month {
      width: 30vw;
      padding: 2% 0;
      margin-left: 4%;
      img {
        width: 2.5vw;
        position: relative;
        top: -0.4vw;
      }
    }
  }
  .calendar-chose-selector {
    background-color: rgba(16, 16, 16, 0.27);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    .chose-selector-con {
      width: 80%;
      position: absolute;
      top: 25%;
      left: 10%;
    }
  }
  ul {
    li {
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;
      .li-item {
        width: 92%;
        margin: 0 auto;
        padding: 3.6% 0 4% 0;
        .lit-item1 {
          float: left;
          .lit-txt1 {
            font-weight: bold;
          }
          .lit-txt2 {
            font-size: 3.6vw;
            color: #969696;
            margin-top: 1vw;
          }
        }
        .lit-item2 {
          float: right;
          font-size: 5vw;
          color: #fe6d0a;
          line-height: 2.3;
        }
        .lit-item3 {
          float: right;
          font-size: 5vw;
          color: #969696;
          line-height: 2.3;
        }
      }
    }
  }
  .no-data {
    width: 100%;
    position: absolute;
    top: 50%;
    text-align: center;
    color: #646464;
  }
}
</style>
